.head{
	height: 20em;
	position: relative;
	.left{
		position: absolute;
		width: 50%;
		
		img{
			cursor: pointer;
			width: 30%;
			&:nth-child(2){
				width: 25%;
				
			}
		}
	}
	.right{
		position: absolute;
		right: 0;
		width: 60%;
		h1{
			margin-top: 2em;
			font-size: 2em;
			color: white;
		}
		p{
			margin-left: 1em;
			font-size: 1.1em;
			color:#72625e;
		}
	}
}
@media screen and (max-width:992px){
	.head{
		height: 16em;
		.left{
			img{
				width:35%;
			}
		}
		.right{
			width:65%;
			
			h1{
				margin-top: 4.5rem;
				font-size: 1.4em;
				margin-left: 2em;
			}
			p{
				font-size: .7em;
				margin-left: 4em;
			}
		}
	}
}
@media screen and (max-width:670px){
	.head{
		height: 13em;
	}
}
@media screen and (max-width:564px){
	.head{
		height: 10em;
		.left{
			width: 40%;
		}
		.right{
			width:70%;
			h1{
				margin-top: 2rem;
				font-size: 1.1em;
			}
			p{
				font-size: .4em;
			}
		}
	}
}
@media screen and (max-width:495px){
	.head{
		height: 24em;
		.left{
			width: 90%;
			left: 1em;
			top: 0em;
			text-align: center;
			img{
				width: 40%;
				&:nth-child(2){
					width: 30%;
				}
			}
		}
		.right{
			width: 75%;
			left: 15%;
			top: 70%;
		}
	}
}
@media screen and (max-width:430px){
	.head{
		height: 21em;
		.left{
			width: 90%;
			left: 1em;
			top: 0em;
			text-align: center;
			img{
				width: 40%;
				&:nth-child(2){
					width: 30%;
				}
			}
		}
		.right{
			width: 90%;
			left: 10%;
			top: 66%;
		}
	}
}
@media screen and (max-width:375px){
	.head{
		height: 18em;
		.left{
			width: 90%;
			left: 1em;
			top: 0em;
			text-align: center;
			img{
				width: 40%;
				&:nth-child(2){
					width: 30%;
				}
			}
		}
		.right{
			width: 95%;
			left: 3%;
			top: 65%;
			p{
				
			}
		}
	}
}
@media screen and (max-width:340px){
	.head{
		height: 17em;
		.left{
			width: 90%;
			left: 1em;
			top: 0em;
			text-align: center;
			img{
				width: 40%;
				&:nth-child(2){
					width: 30%;
				}
			}
		}
		.right{
			width: 95%;
			left: 3%;
			top: 64%;
			h1{
				font-size: 1.2em!important;
			}
			p{
				font-size: 0.5em!important;
			}
		}
	}
}

.join{
	margin-bottom: 1em;
	h1{
		font-size: 2em;
		font-weight: bold;
		color:white;
	}
	span{
		margin-left: .2em;
	}
}

.joinli{
	margin-bottom: 4em;
	display: flex;
	background-color: #897b76;
	padding: 1em 1em;
	.joinleft{
		width: 45%;
		font-size: 1.2em;
		color: white;
		li:hover{
			color: red;
		}
		li{
			list-style-type: disc;
			margin-left: 2em;

		}
	}
	.joinright{
		width: 45%;
		li{
			list-style-type: disc;
		}
		font-size: 1.2em;
		color: white;
		li:hover{
			color: red;
		}
	}
}
@media screen and (max-width:992px){
	.joinli{
		.joinleft{
			width: 45%;
			font-size: 1.1em;
		}
		.joinright{
			font-size: 1.1em;
		}
	}
}
@media screen and (max-width:720px){
	.joinli{
		.joinleft{
			width: 45%;
			font-size: 1em!important;
		}
		.joinright{
			font-size: 1em!important;
		}
	}
}
@media screen and (max-width:620px){
	.joinli{
		display: flex;
		flex-wrap: wrap;
		.joinleft{
			width: 100%;	
		}
		.joinright{
			width: 100%;
			margin-left: 2em;
		}
	}
}

.shop{
	margin-top: 6em;
	margin-bottom: 10em;
}
